<div class="flex">
  <div class="tools">
    <div *ngFor="let item of tools" class="mb20">
      <div class="title">{{ item.group }}</div>
      <div class="buttons">
        <a
          *ngFor="let button of item.children"
          [title]="button.name"
          [draggable]="button.data"
          (dragstart)="onDrag($event, button)"
          (touchstart)="onTouchstart(button)"
        >
          <i class="iconfont {{ button.icon }}"></i>
        </a>
      </div>
    </div>
  </div>
  <div class="full" #workspace></div>
  <div class="props">
    <div class="pv5">
      <div *ngIf="!selected">
        <div class="title">欢迎使用le5le-topology！</div>
        <ul class="ml30 mb20 mt10">
          <li>便捷</li>
          <li>高性能</li>
          <li>可扩展（npm中间件方式）</li>
          <li>云存储</li>
          <li>社区[todo]</li>

          <br />
          <li>软件架构设计</li>
          <li>微服务拓扑图/微服务流量动画</li>
          <li>UML图（流程图）</li>
          <li>[Todo]（活动图、时序图、类图等）</li>

          <br />
          <a href="http://le5le.com/app/topology" target="_blank">使用教程</a
          ><br />
          <a href="https://www.yuque.com/alsmile/topology/about" target="_blank">API开发教程</a
          ><br />
          <a href="https://www.yuque.com/alsmile/topology/faq#EVbCgt" target="_blank">联系我们</a>
        </ul>
        <div class="title mt20">[Todo] 未来规划</div>
        <ul class="ml30 mb20 mt10">
          <li>活动图</li>
          <li>类图</li>
          <li>组合/取消组合</li>
          <li>置顶/置底</li>
          <li>官网</li>
          <li>使用文档</li>
          <li>API开发文档</li>
          <li>社区与分享</li>
        </ul>
      </div>
      <div *ngIf="selected">
        <app-props [props]="selected" [readonly]="readonly" (ok)="onChangeProps($event)"></app-props>
      </div>
    </div>
  </div>
</div>
